<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-10-22 09:52:01
 * @LastEditors: charles
 * @LastEditTime: 2021-10-25 23:11:34
-->
<template>
  <div class="address">
    <van-nav-bar @click-left="$router.back()" left-text="返回" title="我的地址"></van-nav-bar>
    <van-address-list
      v-model="addressId"
      :list="addresses"
      default-tag-text="默认"
      :switchable="false"
      @add="onAdd"
      @edit="onEdit"
    />
  </div>
</template>
<script>
import { computed, onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import {useRouter} from 'vue-router'
import { get } from '../../../utils/request'
export default {
  setup() {
    let addresses = ref([])
    let addressId = ref(0)

    let store = useStore();
    let router = useRouter();

    let user_info = computed(()=> store.state.user.user_info)

    let loadAddresses = async ()=>{
      let url = "/app/address/queryByUserId"
      let resp = await get(url,{userId:user_info.value.id})
      // 数据转换
      let list = resp.data.map(item =>{
        return {
          id:item.id,
          name:item.realname,
          tel:item.telephone,
          address:item.province+' '+item.city+' '+item.area+' '+item.address,
          areaCode:item.areaCode,
          isDefault:item.isDefault
        }
      })
      addresses.value = list;
    }

    let onAdd = () => {
      router.push('/address_edit');
    }
    let onEdit = (item)=> {
      console.log(JSON.stringify(item));
      router.push({
        name:'address_edit',
        params:item
      })
    }

    onMounted(async ()=>{
      await loadAddresses();
    })


    return {
      addresses,
      addressId,
      onAdd,
      onEdit
    }
  },
}
</script>